<template>
	<view class="managerCircle">
		<view class="headers">
		    <view class="header-search-a" v-if="!LookUpShow">
		        <icon class="weui-icon-search_in-box" type="search" :size="iconSize"></icon>
		        <input v-model="keyWord" class="search-input" type="text" placeholder="搜索您管理的圈子：" @focus="searchFocus"/>
		    </view>
		    <view class="header-search-b" v-if="LookUpShow">
		        <icon class="weui-icon-search_in-box" type="search" :size="iconSize"></icon>
		        <input v-model="keyWord" class="search-input" type="text" placeholder="搜索您管理的圈子："/>
		        <button class="search-input-btn" @click.stop="onSearch" v-if="keyWord==''?false:true">搜索</button>
		        <button class="search-input-btn" @click.stop="searchBlur" v-if="keyWord==''?true:false">取消</button>
		    </view>

		</view>
		
		<view class="contain-lookup" v-if="LookUpShow" @click="searchBlur">
			<view class="lookup-list" @click.stop>
				<view v-if="LookUpList.length==0?true:false">未搜索到相关圈子</view>
				<view class="lookup-list-item" v-for="item in LookUpList" :key="item.id" v-if="LookUpList.length==0?false:true">
					<view class="lookup-item-name" @click="skipLoop(item.id)">{{item.name}}</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//查找
				LookUpShow:false,
				LookUpList:[],
			};
		},
		methods:{
			//查找圈子
			onSearch(){
			  this.searchCircle();
			},
			//搜索圈子列表
			async searchCircle(){
			    let params = {
			        keyword : this.keyWord,
			        user_token: uni.getStorageSync('userToken')
			    }
			    const res = await this.$api.searchCircle(params);
			    if (res.data.level == 'success'){
			        console.log(res.data.data)
			        this.LookUpList = res.data.data;
			    }else {
			        uni.showToast({
			            icon:'none',
			            title:res.data.message
			        })
			    }
			},
			//搜索框对焦
			searchFocus(){
			  this.LookUpShow = true;
			},
			searchBlur(){
			    this.keyWord = '';
			    this.LookUpShow = false;
			},
			//进圈
			skipLoop(id){
			    this.keyWord = '';
			    this.LookUpShow = false;
			    uni.navigateTo({
			        url: '/pages/person/managerCircle/managerCircleItem/managerCircleItem?circle_id='+id
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
